import React, { useState } from 'react';
import { Card, Menu } from 'antd'
import { FormOutlined } from '@ant-design/icons';

import AccountInfo from "./AccountInfo";
import ModifyPassword from "./ModifyPassword";
import PersonInfo from "./PersonInfo";
import ThemeSetting from "./ThemeSetting";

const EnumMenuType = {
  baseInfo: "baseInfo",
  modifyPassword: "modifyPassword",
  accountInfo: "accountInfo",
  themeSetting: "themeSetting",
}

const menuItems = [
  // {
  //     key: EnumMenuType.accountInfo,
  //     icon: <FileProtectOutlined />,
  //     label: "账户信息",
  // },
  {
    key: EnumMenuType.baseInfo,
    icon: <FormOutlined />,
    label: "基本信息",
  },
  {
    key: EnumMenuType.modifyPassword,
    icon: <FormOutlined />,
    label: "修改密码",
  },
  {
    key: EnumMenuType.themeSetting,
    icon: <FormOutlined />,
    label: "主题设置",
  },
];

const UserSetting: React.FC = () => {
  const [selectedKeys, setSelectedKeys] = useState([menuItems[0].key]);

  return (
    <div className="person-setting">
      <Card>
        <Menu
          style={{ width: 256, height: "100%" }}
          selectedKeys={selectedKeys}
          mode={"inline"}
          theme={"light"}
          items={menuItems}
          onClick={(info) => {
            setSelectedKeys([info.key]);
          }}
        />
        <div className="content">
          {(() => {
            switch (selectedKeys[0]) {
              case EnumMenuType.baseInfo:
                return <PersonInfo />
              case EnumMenuType.modifyPassword:
                return <ModifyPassword />
              case EnumMenuType.accountInfo:
                return <AccountInfo />
              case EnumMenuType.themeSetting:
                return <ThemeSetting />
              default:
                return <span>未找到对应的菜单内容</span>
            }
          })()}
        </div>
      </Card>

      {/*language=SCSS*/}
      <style jsx>{`
        .person-setting{
          height: 100%;
          :global(.ant-card){
            height: 100%;
            :global(.ant-card-body){
                height: 100%;
                display: flex;
                
                .content{
                    width: 100%;
                    height: 100%;
                    padding: 5px;
                }
            }
          }
        }
      `}</style>
    </div>
  )
}

export default UserSetting
